<template>
  <div class="mobile-container">
    <!-- 固定导航栏 -->
    <div class="mobile-navbar">
      <div class="mobile-nav-back" @click="goBack">
        <i class="fas fa-chevron-left"></i>
      </div>
      <div class="mobile-nav-title">危机个案详情</div>
      <div class="mobile-nav-placeholder"></div>
    </div>

    <!-- 内容区域 -->
    <div class="mobile-content">
      <!-- 头部信息区 -->
      <div class="mobile-header" v-if="detail">
        <div class="mobile-header-bg-circle"></div>

        <div class="mobile-header-top">
          <div class="mobile-header-left">
            <span class="mobile-case-id"
              >个案ID: {{ detail.code || "暂无" }}</span
            >
            <h1 class="mobile-title">危机个案跟进详情</h1>
            <span
              class="mobile-risk-level"
              :class="getRiskLevelClass(detail.crisisLevel)"
            >
              <i class="fas fa-exclamation-triangle"></i>
              {{ detail.crisisLevel || "风险等级评估" }} -
              {{ detail.confidentSituation || "保密情况" }}
            </span>
          </div>
          <span class="mobile-update-time">
            <i class="fas fa-clock"></i> 最后更新:
            {{ detail.createTime || detail.createdate }}
          </span>
        </div>

        <div class="mobile-info-grid">
          <div class="mobile-info-item">
            <p class="mobile-info-label">用户姓名</p>
            <p class="mobile-info-value">{{ detail.zkName || "暂无" }}</p>
          </div>
          <div class="mobile-info-item">
            <p class="mobile-info-label">咨询师</p>
            <p class="mobile-info-value">{{ detail.ucName || "暂无" }}</p>
          </div>
          <div class="mobile-info-item">
            <p class="mobile-info-label">员工编号</p>
            <p class="mobile-info-value">{{ detail.memberno || "暂无" }}</p>
          </div>
          <div class="mobile-info-item">
            <p class="mobile-info-label">联系电话</p>
            <p class="mobile-info-value">{{ detail.callphone || "暂无" }}</p>
          </div>
        </div>
      </div>

      <!-- 跟进时间轴 -->
      <div class="mobile-timeline-container" v-if="detail">
        <div class="mobile-timeline-header">
          <span class="mobile-header-icon">
            <i class="fas fa-history"></i>
          </span>
          <h2>个案跟进流程</h2>
        </div>

        <div class="mobile-timeline-content">
          <!-- 阶段1: 电话中心已接单 -->
          <div class="mobile-timeline-item">
            <div class="mobile-timeline-icon green">
              <i class="fas fa-check"></i>
            </div>
            <div class="mobile-timeline-card">
              <div class="mobile-card-header">
                <h3>电话中心已接单</h3>
                <span class="mobile-time">{{ detail.calltime }}</span>
              </div>
              <span class="mobile-status-badge completed">已完成</span>
              <div class="mobile-card-person">
                <div class="mobile-avatar">
                  {{ getInitials(detail.czName) }}
                </div>
                <div class="mobile-person-info">
                  <p class="mobile-name">{{ detail.czName || "用户" }}</p>
                  <p class="mobile-role">来电用户</p>
                </div>
              </div>
            </div>
          </div>

          <!-- 阶段2: 已安排咨询师跟进 -->
          <div class="mobile-timeline-item">
            <div class="mobile-timeline-icon green">
              <i class="fas fa-check"></i>
            </div>
            <div class="mobile-timeline-card">
              <div class="mobile-card-header">
                <h3>已安排咨询师跟进</h3>
                <span class="mobile-time">{{ detail.createdate }}</span>
              </div>
              <span class="mobile-status-badge completed">已完成</span>
              <div class="mobile-card-person" v-if="detail.ucName">
                <div class="mobile-avatar">
                  {{ getInitials(detail.ucName) }}
                </div>
                <div class="mobile-person-info">
                  <p class="mobile-name">{{ detail.ucName }}</p>
                  <p class="mobile-role">咨询师</p>
                </div>
              </div>
              <div class="mobile-card-person" v-else>
                <div class="mobile-avatar">系</div>
                <div class="mobile-person-info">
                  <p class="mobile-name">系统分配</p>
                  <p class="mobile-role">待分配咨询师</p>
                </div>
              </div>
            </div>
          </div>

          <!-- 阶段3: 咨询师跟进中 -->
          <div class="mobile-timeline-item">
            <div
              class="mobile-timeline-icon blue"
              v-if="detail.crisiSituation !== '解除危机'"
            >
              <i class="fas fa-sync-alt"></i>
            </div>

            <div
              class="mobile-timeline-icon green"
              v-if="detail.crisiSituation == '解除危机'"
            >
              <i class="fas fa-check"></i>
            </div>

            <div class="mobile-timeline-card">
              <div class="mobile-card-header">
                <h3>个案处理中</h3>
                <span class="mobile-time">{{ detail.createdate }} 至今</span>
              </div>
              <span
                class="mobile-status-badge in-progress"
                v-if="detail.crisiSituation !== '解除危机'"
                >进行中</span
              >
              <span
                class="mobile-status-badge completed"
                v-if="detail.crisiSituation == '解除危机'"
                >已完成</span
              >

              <!-- 修改部分开始：优先显示 consultationPoint -->
              <div class="mobile-feedback" v-if="detail.consultationPoint">
                <div class="mobile-feedback-header">
                  <i class="fas fa-comment-medical"></i>
                  <span>咨询要点</span>
                </div>
                <p class="mobile-feedback-content">
                  {{ detail.consultationPoint }}
                </p>
              </div>

              <div
                class="mobile-feedback"
                v-else-if="detail.observationSuggestion"
              >
                <div class="mobile-feedback-header">
                  <i class="fas fa-comment-medical"></i>
                  <span>观察与建议</span>
                </div>
                <p
                  class="mobile-feedback-content"
                  v-if="detail.observationSuggestion"
                >
                  {{ detail.observationSuggestion }}
                </p>
              </div>

              <!-- <div class="mobile-feedback" v-else>
                <div class="mobile-feedback-header">
                  <i class="fas fa-info-circle"></i>
                  <span>当前状态</span>
                </div>
                <p class="mobile-feedback-content">
                  {{ detail.crisiSituation || "处理中" }}
                  {{
                    detail.confidentSituation
                      ? `- ${detail.confidentSituation}`
                      : ""
                  }}
                </p>
              </div> -->
              <!-- 修改部分结束 -->

              <div class="mobile-card-person" v-if="detail.ucName">
                <div class="mobile-avatar">
                  {{ getInitials(detail.ucName) }}
                </div>
                <div class="mobile-person-info">
                  <p class="mobile-name">{{ detail.ucName }}</p>
                  <p class="mobile-role">处理人员</p>
                </div>
              </div>
            </div>
          </div>

          <!-- 阶段4: 咨询师评估风险关闭 -->
          <div class="mobile-timeline-item">
            <div
              class="mobile-timeline-icon gray"
              v-if="detail.crisiSituation !== '解除危机'"
            >
              <i class="far fa-clock"></i>
            </div>

            <div
              class="mobile-timeline-icon green"
              v-if="detail.crisiSituation == '解除危机'"
            >
              <i class="fas fa-check"></i>
            </div>
            <div class="mobile-timeline-card">
              <div class="mobile-card-header">
                <h3>个案结案评估</h3>
              </div>
              <span
                class="mobile-status-badge pending"
                v-if="detail.crisiSituation !== '解除危机'"
                >待进行</span
              >
              <span
                class="mobile-status-badge completed"
                v-if="detail.crisiSituation == '解除危机'"
                >已完成</span
              >
              <div class="mobile-feedback" v-if="detail.reportUrl">
                <div class="mobile-feedback-header">
                  <i class="fas fa-file-pdf"></i>
                  <span>评估报告</span>
                </div>
                <p class="mobile-feedback-content">
                  个案报告已生成，<a
                    :href="detail.reportUrl"
                    target="_blank"
                    class="mobile-report-link"
                    >点击查看</a
                  >
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 加载状态 -->
      <div v-if="!detail" class="mobile-loading-container">
        <div class="mobile-loading-spinner">
          <i class="fas fa-spinner fa-spin"></i>
        </div>
        <p>加载中...</p>
      </div>
      <div class="btns">
        <button class="retry-btn2" @click="gohome()">返回首页</button>
      </div>
    </div>
  </div>
</template>

<script>
import { getDetail } from "../../api/manager";

export default {
  name: "MobileCrisisCaseDetail",
  data() {
    return {
      id: null,
      detail: null,
    };
  },
  mounted() {
    this.initMobileCardEffects();
  },
  created() {
    this.id = this.$route.query.id;
    this.getDetail();
  },
  methods: {
    gohome() {
      this.$router.go(-2);
    },
    async getDetail() {
      try {
        const res = await getDetail({ id: this.id });
        if (res.code === 200) {
          this.detail = res.data;
        } else {
          this.showToast("获取详情失败", "error");
        }
      } catch (error) {
        console.error("获取详情错误:", error);
        this.showToast("网络错误，请重试", "error");
      }
    },

    // 格式化日期时间
    formatDateTime(dateTime) {
      if (!dateTime) return "暂无";
      return dateTime.replace(/:\d{4}$/, "");
    },

    // 获取风险等级对应的样式类
    getRiskLevelClass(level) {
      if (!level) return "";

      const levelMap = {
        高风险: "mobile-risk-high",
        中风险: "mobile-risk-medium",
        低风险: "mobile-risk-low",
        紧急干预: "mobile-risk-urgent",
      };
      return levelMap[level] || "";
    },

    // 获取姓名的首字母
    getInitials(name) {
      if (!name) return "匿";
      return name.length > 1 ? name.substring(0, 1) : name;
    },

    // 返回上一页
    goBack() {
      this.$router.go(-1);
    },

    // 初始化移动端卡片效果
    initMobileCardEffects() {
      this.$nextTick(() => {
        const cards = document.querySelectorAll(".mobile-timeline-card");
        cards.forEach((card) => {
          card.addEventListener("touchstart", function () {
            this.style.transform = "translateY(-2px)";
            this.style.boxShadow = "0 5px 15px rgba(0, 0, 0, 0.1)";
          });

          card.addEventListener("touchend", function () {
            this.style.transform = "";
            this.style.boxShadow = "";
          });
        });
      });
    },

    showToast(message, type) {
      const toast = document.createElement("div");
      toast.className = `mobile-toast mobile-toast-${type}`;

      let icon = "";
      if (type === "success") {
        icon = '<i class="fas fa-check-circle"></i>';
      } else if (type === "loading") {
        icon = '<i class="fas fa-spinner fa-spin"></i>';
      } else if (type === "error") {
        icon = '<i class="fas fa-exclamation-circle"></i>';
      }

      toast.innerHTML = `${icon} ${message}`;
      document.body.appendChild(toast);

      setTimeout(() => {
        toast.classList.add("mobile-show");
      }, 10);

      setTimeout(() => {
        toast.classList.remove("mobile-show");
        setTimeout(() => {
          document.body.removeChild(toast);
        }, 300);
      }, 2000);
    },
  },
};
</script>

<style scoped>
/* 样式部分保持不变，与您提供的代码相同 */
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap");
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css");

/* 移动端基础样式 */
.mobile-container {
  font-family: "Noto Sans SC", sans-serif;
  background-color: #f8fafc;
  color: #1e293b;
  line-height: 1.5;
  min-height: 100vh;
  width: 100%;
  margin: 0 auto;
  padding-top: 60px;
  -webkit-overflow-scrolling: touch; /* 改善iOS滚动体验 */
}

.mobile-content {
  padding: 16px;
  max-width: 100%;
  box-sizing: border-box;
}

/* 移动端导航栏 */
.mobile-navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  z-index: 1000;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
}

.mobile-nav-back {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #eef0ff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #5b67ff;
  cursor: pointer;
  transition: all 0.3s ease;
  touch-action: manipulation; /* 改善触摸响应 */
}

.mobile-nav-back:active {
  background: #e0e0e0;
  transform: scale(0.95);
}

.mobile-nav-title {
  color: #333;
  font-size: 17px;
  font-weight: 600;
}

.mobile-nav-placeholder {
  width: 36px;
}

/* 移动端头部样式 */
.mobile-header {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
  color: white;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.mobile-header-bg-circle {
  position: absolute;
  top: -30px;
  right: -20px;
  width: 120px;
  height: 120px;
  background-color: white;
  opacity: 0.1;
  border-radius: 50%;
}

.mobile-header-top {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-bottom: 16px;
  position: relative;
}

.mobile-header-left {
  margin-bottom: 12px;
}

.mobile-case-id {
  display: inline-block;
  background-color: rgba(255, 255, 255, 0.15);
  padding: 4px 12px;
  border-radius: 9999px;
  font-size: 12px;
  margin-bottom: 8px;
}

.mobile-title {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 8px;
  line-height: 1.3;
}

.mobile-risk-level {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  background-color: rgba(239, 68, 68, 0.9);
  border-radius: 9999px;
  font-weight: 500;
  font-size: 12px;
  margin-top: 8px;
}

.mobile-risk-level.mobile-risk-high {
  background-color: rgba(239, 68, 68, 0.9);
}

.mobile-risk-level.mobile-risk-medium {
  background-color: rgba(245, 158, 11, 0.9);
}

.mobile-risk-level.mobile-risk-low {
  background-color: rgba(16, 185, 129, 0.9);
}

.mobile-risk-level.mobile-risk-urgent {
  background-color: rgba(220, 38, 38, 0.9);
}

.mobile-risk-level i {
  margin-right: 6px;
  font-size: 12px;
}

.mobile-update-time {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  background-color: rgba(255, 255, 255, 0.15);
  border-radius: 9999px;
  font-weight: 500;
  font-size: 12px;
}

.mobile-update-time i {
  margin-right: 6px;
  font-size: 12px;
}

.mobile-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.mobile-info-item {
  margin-bottom: 0;
}

.mobile-info-label {
  font-size: 12px;
  opacity: 0.85;
  margin-bottom: 4px;
}

.mobile-info-value {
  font-size: 14px;
  font-weight: 500;
}

/* 移动端时间轴样式 */
.mobile-timeline-container {
  background-color: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

.mobile-timeline-header {
  background-color: #f9fafb;
  padding: 16px 20px;
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  align-items: center;
}

.mobile-header-icon {
  width: 32px;
  height: 32px;
  background-color: #3b82f6;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  margin-right: 12px;
  font-size: 14px;
}

.mobile-timeline-header h2 {
  font-size: 18px;
  font-weight: 600;
}

.mobile-timeline-content {
  padding: 20px;
  position: relative;
}

.mobile-timeline-content::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 35px;
  width: 3px;
  background: #e2e8f0;
  border-radius: 2px;
  z-index: 1;
}

.mobile-timeline-item {
  position: relative;
  margin-bottom: 24px;
  padding-left: 70px;
}

.mobile-timeline-icon {
  position: absolute;
  left: 20px;
  top: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: white;
  z-index: 2;
}

.mobile-timeline-icon.green {
  background-color: #10b981;
}

.mobile-timeline-icon.blue {
  background-color: #3b82f6;
}

.mobile-timeline-icon.gray {
  background-color: #d1d5db;
}

.mobile-timeline-card {
  background-color: #f9fafb;
  border-radius: 10px;
  padding: 16px;
  border-left: 3px solid #3b82f6;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: all 0.2s ease;
  touch-action: manipulation;
}

.mobile-card-header {
  display: flex;
  flex-direction: column;
  margin-bottom: 12px;
}

.mobile-card-header h3 {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 4px;
}

.mobile-time {
  color: #1d4ed8;
  font-weight: 500;
  font-size: 12px;
}

.mobile-status-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 16px;
  font-weight: 500;
  font-size: 12px;
  margin-bottom: 12px;
}

.mobile-status-badge.completed {
  background-color: #dcfce7;
  color: #166534;
}

.mobile-status-badge.in-progress {
  background-color: #dbeafe;
  color: #1e40af;
}

.mobile-status-badge.pending {
  background-color: #fef3c7;
  color: #92400e;
}

.mobile-feedback {
  background-color: #dbeafe;
  border-radius: 6px;
  padding: 12px;
  border-left: 3px solid #3b82f6;
  margin: 16px 0;
}

.mobile-feedback-header {
  display: flex;
  align-items: center;
  color: #1d4ed8;
  font-weight: 600;
  margin-bottom: 8px;
  font-size: 13px;
}

.mobile-feedback-header i {
  margin-right: 8px;
  font-size: 13px;
}

.mobile-feedback-content {
  color: #1f2937;
  line-height: 1.5;
  font-size: 13px;
  white-space: pre-line;
  word-break: break-word;
  max-width: 100%;
  overflow-wrap: break-word;
}
.mobile-report-link {
  color: #1d4ed8;
  text-decoration: underline;
  font-weight: 500;
  font-size: 13px;
}

.mobile-card-person {
  display: flex;
  align-items: center;
  padding-top: 12px;
  border-top: 1px dashed #e5e7eb;
  margin-top: 12px;
}

.mobile-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: #a855f7;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 600;
  margin-right: 10px;
  font-size: 14px;
}

.mobile-name {
  font-weight: 600;
  font-size: 14px;
}

.mobile-role {
  font-size: 12px;
  color: #6b7280;
}

/* 移动端加载状态 */
.mobile-loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  text-align: center;
}

.mobile-loading-spinner {
  font-size: 32px;
  color: #3b82f6;
  margin-bottom: 16px;
}

.mobile-loading-container p {
  font-size: 14px;
  color: #6b7280;
}

/* 移动端Toast样式 */
.mobile-toast {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background-color: #333;
  color: white;
  padding: 12px 20px;
  border-radius: 8px;
  font-size: 14px;
  z-index: 10000;
  opacity: 0;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  max-width: 80%;
}

.mobile-toast.mobile-show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

.mobile-toast i {
  margin-right: 8px;
}

.mobile-toast-success {
  background-color: #10b981;
}

.mobile-toast-error {
  background-color: #ef4444;
}

.mobile-toast-loading {
  background-color: #3b82f6;
}

/* 响应式调整 */
@media (max-width: 360px) {
  .mobile-info-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .mobile-timeline-item {
    padding-left: 60px;
  }

  .mobile-timeline-content::before {
    left: 25px;
  }

  .mobile-timeline-icon {
    left: 15px;
  }
}
.btns {
  display: flex;
  justify-content: space-around;
}
.retry-btn2 {
  background: #40a2f4;

  color: white;
  border: none;
  padding: 12px 30px;
  border-radius: 25px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 500;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}
</style>
